<template>
  <el-container>
    <el-aside style="border-right: 2px solid #d0d0d0;">
      <div style="text-align: center">
        <el-button type="primary" icon="el-icon-s-promotion" @click="dialogFormVisible=true"> 提出疑问</el-button>
      </div>
      <el-dialog
        title="提出疑问"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form :model="form" :rules="rules">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              :autosize="{ minRows: 7, maxRows: 7}"
              placeholder="请输入你的疑问"
              maxlength="400"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addMail">确 定</el-button>
        </div>
      </el-dialog>
      <div
        v-for="(item,index) in clarificationList"
        :key="index"
        :class="{active:index===changeIndex}"
        class="clarification-list-css"
        @click="changeReplay(index)"
      >
        <el-col :span="2" style="line-height: 65px">
          <i
            :class="item.type<1?'el-icon-info':'el-icon-question'"
            :style="{color:item.type<1?'#b363d4':'#ff6b81',marginLeft:'4px'}"
          />
        </el-col>
        <el-col :span="22">
          <h4 style="padding-top: 1rem;margin: 8px 0">{{ item.title }}</h4>
          <p class="clarification-list-p">{{ item.content }}</p>
        </el-col>
      </div>
    </el-aside>
    <el-main>
      <div :style="{color:type<1?'#b363d4':'#ff6b81'}">
        <i :class="type<1?'el-icon-info':'el-icon-question'" style="font-size:20px" />
        <span style="font-size: 18px;margin-left: 4px">{{ type &lt; 1 ? 'Announcement' : 'Question' }}</span>
      </div>
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
      <div v-if="type>0">
        <el-divider />
        <div style="color: #2ecc71">
          <i class="el-icon-success" style="font-size:20px" />
          <span style="font-size: 18px;margin-left: 4px">{{ 'Answer' }}</span>
        </div>
        <p :style="{color:answer?'#000':'#1e90ff'}">{{ answer?answer:'尚未回复……' }}</p>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getUserId } from '@/utils/auth'
import { addMail, mailList } from '@/api/mail'

export default {
  name: 'ContestClarification',
  props: {
    contestId: {
      type: String,
      default: -1
    }
  },
  data() {
    return {
      title: '',
      content: '',
      type: 0,
      answer: '',
      changeIndex: 0,
      dialogFormVisible: false,
      form: {
        title: '',
        content: ''
      },
      clarificationList: [
        { title: '', content: '', type: 0 }
      ],
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.mailList()
  },
  methods: {
    mailList() {
      mailList({ contestId: this.contestId }).then(res => {
        this.clarificationList = res.data
        this.changeReplay(0)
      })
    },
    addMail() {
      const formData = new FormData()
      formData.set('contestId', this.contestId)
      formData.set('ordUserId', getUserId())
      formData.set('title', this.form.title)
      formData.set('content', this.form.content)
      addMail(formData).then(res => {
        this.$message.success(res.message)
        this.mailList()
        this.dialogFormVisible = false
        this.form.content = ''
        this.form.title = ''
      })
    },
    changeReplay(index) {
      this.changeIndex = index
      this.title = this.clarificationList[index].title
      this.content = this.clarificationList[index].content
      this.type = this.clarificationList[index].type
      if (this.type > 0) {
        this.answer = this.clarificationList[index].answer
      }
    }
  }
}
</script>

<style scoped>
.clarification-list-css {
  width: 100%;
  height: 70px;
}

.clarification-list-css:hover {
  cursor: pointer;
  color: #008ef1;
}

.clarification-list-p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #939393;
  font-size: 14px;
  margin: 0;
}

.active {
  cursor: pointer;
  background-color: #f1f1f1;
}

.el-divider--horizontal {
  background-color: #2c3e50;
}
</style>
